<template>
    <div class="questionnaire">
      <div style="position: relative;width: 100%">
        <img src="../assets/img/header.png" style="width: 100%;" />
        <div style="width: 100%;display: flex;justify-content: center; padding-bottom: 2.6667rem;       padding-left: 1rem;"
          class="contentBg">
          <div style="width: 7rem;margin: 1.0667rem 0;">
            <van-form @submit="onSubmit" @failed="onFailed" ref="vanFormRef">
              <van-cell-group inset style="background: transparent;">
                 <div style="text-align: left;font-weight: bold;font-size: .64rem;margin: .2667rem 0;">
                  一、满意度评价</div>
                <div>
                  <div
                    style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                    财务部</div>
                  <van-field class="zdyField" required name="financeData" label="数据完整准确性(财务部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.financeData">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="financeAnalysis" label="问题精准性及剖析深度(财务部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.financeAnalysis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="financeEmphasis" label="重点突出程度(财务部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.financeEmphasis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="financeGuidance" label="对后续工作的指导性(财务部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.financeGuidance">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                </div>
                <div>
                  <div
                    style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                    市场部</div>
                  <van-field class="zdyField" required name="marketData" label="数据完整准确性(市场部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.marketData">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="marketAnalysis" label="问题精准性及剖析深度(市场部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.marketAnalysis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="marketEmphasis" label="重点突出程度(市场部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.marketEmphasis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="marketGuidance" label="对后续工作的指导性(市场部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.marketGuidance">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                </div>
                <div>
                  <div
                    style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                    政企部</div>
                  <van-field class="zdyField" required name="governmentData" label="数据完整准确性(政企部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.governmentData">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="governmentAnalysis" label="问题精准性及剖析深度(政企部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.governmentAnalysis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="governmentEmphasis" label="重点突出程度(政企部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.governmentEmphasis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="governmentGuidance" label="对后续工作的指导性(政企部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.governmentGuidance">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                </div>
                <div>
                  <div
                    style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                    网络部</div>
                  <van-field class="zdyField" required name="networkData" label="数据完整准确性(网络部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.networkData">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="networkAnalysis" label="问题精准性及剖析深度(网络部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.networkAnalysis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="networkEmphasis" label="重点突出程度(网络部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.networkEmphasis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="networkGuidance" label="对后续工作的指导性(网络部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.networkGuidance">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                </div>
                <div>
                  <div
                    style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                    品管部</div>
                  <van-field class="zdyField" required name="qualityData" label="数据完整准确性(品管部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.qualityData">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="qualityAnalysis" label="问题精准性及剖析深度(品管部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.qualityAnalysis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="qualityEmphasis" label="重点突出程度(品管部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.qualityEmphasis">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                  <van-field class="zdyField" required name="qualityGuidance" label="对后续工作的指导性(品管部)"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                      <div>
                        <van-radio-group v-model="formState.qualityGuidance">
                          <van-radio name="0">非常满意</van-radio>
                          <van-radio name="1">满意</van-radio>
                          <van-radio name="2">一般</van-radio>
                          <van-radio name="3">不满意</van-radio>
                          <van-radio name="4">非常不满意</van-radio>
                        </van-radio-group>
                      </div>
                    </template>
                  </van-field>
                </div>
                <div style="text-align: left;font-weight: bold;font-size: .64rem;margin: .2667rem 0;">
                  三、其他支撑需求</div>
                <div>
                  <van-field class="zdyField" v-model="formState.supportRequest1" label="支撑需求1：" type="textarea"
                    placeholder="请输入支撑需求" rows="5" autosize />
  
                  <van-field class="zdyField" v-model="formState.supportRequest2" label="支撑需求2：" type="textarea"
                    placeholder="请输入支撑需求" rows="5" autosize />
                </div>
                <div style="margin: .4267rem;width: 80%;" >
                  <van-button round block type="primary" native-type="submit">
                    提交
                  </van-button>
                  
                </div>
              </van-cell-group>
            </van-form>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="showPopup" position="bottom">
      <van-picker show-toolbar title="选择区县" :columns="county" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
  </template>
  
  <script setup>
  import { useRouter } from "vue-router";
  import { Toast } from "vant";
  import { addQuestionnaire } from "../api/user"
  import { ref, toRaw } from "vue";
  import { debounce} from "../utils/index"
  const showPopup = ref(false)
  const router = useRouter();
  const county = ref([
    '宝塔区',
    '安塞区',
    '子长市',
    '延长县',
    '延川县',
    '志丹县',
    '吴起县',
    '甘泉县',
    '富县',
    '洛川县',
    '宜川县',
    '黄龙县',
    '黄陵县',
  ])
  const formState = ref({
    //基础数据
    district: undefined,
    frequency: undefined,
  
    //财务部
    financeData: undefined,
    financeAnalysis: undefined,
    financeEmphasis: undefined,
    financeGuidance: undefined,
    //市场部
    marketData: undefined,
    marketAnalysis: undefined,
    marketEmphasis: undefined,
    marketGuidance: undefined,
    //政企部
    governmentData: undefined,
    governmentAnalysis: undefined,
    governmentEmphasis: undefined,
    governmentGuidance: undefined,
    //网络部
    networkData: undefined,
    networkAnalysis: undefined,
    networkEmphasis: undefined,
    networkGuidance: undefined,
    //品管部
    qualityData: undefined,
    qualityAnalysis: undefined,
    qualityEmphasis: undefined,
    qualityGuidance: undefined,
    //
    supportRequest1: undefined,
    supportRequest2: undefined
  })
  function onConfirm(value, index) {
    formState.value.district = value
    showPopup.value = false
  }
  function onCancel() {
    Toast('取消');
    showPopup.value = false
  }
  // 表单提交
  const onSubmit = debounce(()=>{
      handleAdd()
    },1000)
  const onFailed = (errorInfo) => {
    Toast.fail('提交失败,完善信息')
    console.log('failed', errorInfo);
  }
  
  const handleAdd = async () => {
    return new Promise(async (resolve, reject) => {
      addQuestionnaire({ ...formState.value }).then(res => {
        router.push({
          path: "/questionnaire"
        })
      })
    })
  }
  </script>
  
  <style scoped>
  .questionnaire {
    width: 100%;
  }
  
  .van-cell-group {
    margin: 0;
  }
  
  .zdyField {
    flex-direction: column;
  }
  
  ::v-deep(.zdyField .van-cell__title, .van-cell .van-cell__title) {
    width: 100% !important;
    color: #315FFF;
    font-size: .4267rem;
    margin-bottom: .1333rem;
  
  }
  
  ::v-deep(.cField .van-cell__title) {
    background: transparent;
    color: #315FFF;
    font-size: .4267rem;
  
  
  }
  
  .cField,
  .zdyField,
  .van-cell {
    background: transparent !important;
  }
  
  ::v-deep(.van-radio-group) {
    display: flex;
    flex-direction: column;
    gap: .1867rem;
  }
  
  .contentBg {
    background-image: url("../assets/img/contentBg.png");
    background-size: 100% 100%;
  }
  
  /* ::v-deep(.zdyField .van-field__body){
    border: .0533rem solid #F0F3F4;
    padding: .08rem;
  } */
  </style>
  